<template>
  <div class="content">
    <div class="handles">
      <div class="tips">
        <Icon type="ios-alert" size='24' color='#2d8cf0' />
        您可在本页面查看公客池客户的分配记录，并可根据记录进行重新分配操作<span>
        </span>
      </div>
      <div class="tab" style="margin-top:10px;">
        <Tabs type="card" v-model="showTab" :animated="false" @on-click="tabClickFun">
          <TabPane label="公客池线索客户" name="1">
          </TabPane>
          <TabPane label="公客池到访客户" name="2">
          </TabPane>
          <TabPane label="隐私号线索客户" name="3">
          </TabPane>
          <TabPane label="隐私号到访客户" name="4">
          </TabPane>
        </Tabs>
      </div>
      <div class="tipBtn flex flex-direction-row flex-horizontal-end">
        <span>共{{page.total}}组，已选{{customerChoosedLength}}组</span>
        <Button type="primary" style="margin-left:10px;" v-if="unlocking('0101020401')"
          @click="onAllot">重新分配</Button>
        <Button type="primary" style="margin-left:10px;" v-if="unlocking('0101020403')"
          @click="exportData('1')">导出</Button>
        <Button type="primary" style="margin-left:10px;" v-if="unlocking('0101020402')"
          @click="exportData('0')">导出Excel</Button>
      </div>
    </div>
    <dt-grid ref="table" :select="select" :columns="columns" page :onFetch='onFetch'
      :cell-height="80" />
    <allot-modal ref="allot" @assignSuccess='assignSuccess' />

    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{ top: '5%' }"
      :footer-hide="true" @on-cancel="markCancel">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>
  </div>
</template>

<script>
  import allotModal from '../assign/components/allot-modal.vue'
  import detailPage from '../details.vue'
  import columnOpt from './opt/column.js'
  import publicCustomerMgr from '@/biz/customer/publicCustomer.js'
  export default {
    components: {
      allotModal,
      detailPage,
    },
    data() {
      return {
        privacyFlag: false,
        showTab: '1',

        customerType: null,
        label1: '到访客户',
        label2: '隐私号客户',
        tabName: 'name1',
        sourcedata: [],
        targetdata: [],
        assignConfirmFlag: false,
        assignConfirmFlagSure: false,
        retain: '', 
        tipFlag: false,
        userCustomerId: [],
        customerChoosedLength: 0,
        select: {
          checkbox: {
            checkMethod: ({ row }) => {
              return row.isReassign == 1
            }
          },
          change: (e) => { this.tableChange(e) },
        },
        page: {
          total: 0,
          current: 1
        },
        validFlage: false,
        onRecordFlage: false,
        columns: [],
        list: [],
        params: {},
        allClueNumber: 0,
        noHeretoNumber: 0,
        heretoNumber: 0,
        popLoading: true,
        popClass: '',
        followUpList: [],
        popLen: 0,
        detailsFlag: false,
        detailsParams: {},
      }
    },

    created() {},
    mounted() {
      this.columns = columnOpt.options(this, 'public')
      this.$refs.table.init(this)
      this.$refs.table.fetch()
    },
    methods: {
      assignSuccess() {
        this.$refs.table.clearFilter()
        this.$refs.table.fetch()
      },

      tabClickFun(val) {
        this.showTab = val
        this.$refs.table.clearFilter()
        this.$refs.table.fetch(true)
      },
      //表格选中
      tableChange(val) {
        this.userCustomerId = []
        if (val && val.length) {
          this.customerChoosedLength = val.length
          val.forEach((item) => {
            if (item.customerPublicId) {
              this.userCustomerId.push(Number(item.customerPublicId))
            }
          })
        } else {
          this.userCustomerId = []
          this.customerChoosedLength = 0
        }
      },
      // 导出
      exportData(mask) {
        let params = {
          ...this.params,
          maskCustomerPhone: mask
        }
        publicCustomerMgr.customerPublicPoolDistributionExport(params)

      },
      // 分配线索
      onAllot() {
        if (this.userCustomerId.length < 1) {
          this.$Message.error('请先选择需要分配的线索')
        } else {
          let obj = {
            topNum: (this.showTab == 1 || this.showTab == 3) ? 3 : '',
            userCustomerId: this.userCustomerId,
            showTab: (this.showTab == 1 || this.showTab == 3) ? 2 : '',
            source: 3,
            assignAll: false,
            screening: null,
            privacyFlag:(this.showTab == 3 || this.showTab == 4) ? 1:0
          }
          this.$refs.allot.show(obj)
        }
      },
      // 列表数据
      onFetch(data) {
        this.customerChoosedLength = 0
        this.params = data
        if (this.showTab == 3 || this.showTab == 4) {
          this.params.privacy = 1
        } else {
          this.params.privacy = 2
        }
        if (this.showTab == 1 || this.showTab == 3) {
          this.params.customerType = 1
        } else {
          this.params.customerType = 2
        }
        this.params.buildingId = this.$dt.buildInfo().housesId
        return publicCustomerMgr.customerPublicPoolDistributionList(data).then(res => {
          this.list = res.list
          this.page.total = res.total
          return res
        })
      },
      // 查看详情
      getDetail(row) {
        if (this.showTab=='1'||this.showTab=='3') {
          this.detailsFlag = true
          this.detailsParams = {
            flag: 'clue',
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            userId: row.userId,
            buildingId: this.$dt.buildInfo().housesId,
            cityCode: this.$dt.buildInfo().cityId,
          }
        } else {
          this.detailsFlag = true
          this.detailsParams = {
            customerId: row.customerId,
            userCustomerId: row.userCustomerId,
            buildingId: row.buildingId,
            userId: row.userId,
            buildingId: this.$dt.buildInfo().housesId,
            cityCode: this.$dt.buildInfo().cityId,
          }
        }
      },
      markCancel() {
        this.detailsFlag = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .content {
    position: relative;
    padding: 20px;

    .topRecord {
      display: flex;
      flex-direction: row;

      .record1 {
        display: flex;
        flex-direction: row;

        p {
          text-align: center;
          padding: 0 20px;

          span {
            display: block;
            font-size: 20px;
            font-weight: bold;
          }

          em {
            display: block;
            font-style: normal;
          }
        }

        p.heng {
          border-right: 1px #ccc solid;
        }
      }

      .recordBtn {
        padding-left: 20px;


        p {
          span {
            color: #2db7f5
          }
        }

      }
    }

    .retainClass {
      margin-top: 20px;
    }

    .tips {
      background: rgba(254, 252, 236, 1);
      display: inline-block;
      padding: 5px;

      span {
        color: #2d8cf0;
        margin-right: 20px;
      }

    }

    .closeClass {
      vertical-align: -5px;
      cursor: pointer;
    }

    .helpIcon {
      vertical-align: -4px;
    }


  }

  .handles {
    overflow: hidden;



    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    margin-bottom: 10px;
    // flex-direction: row;




  }

  .footer {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }
</style>